<template>
  <div class="goods_rec">
    <div class="nav">
      <h1>好价推荐</h1>
    </div>
    <main>
      <van-search v-model="value" placeholder="手机" @focus="sear" />
      <!-- <div class="separate"></div> -->
      <div v-if="isLoading" class="loading">
        <van-skeleton v-for="v in 10" :key="'key' + v" title :row="4" />
      </div>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="goods">
            <ul>
              <router-link to="/good_desc">
                <li v-for="good in goodsList" @click="handleClick">
                  <div class="goods_choose">
                    <div class="goods_header">
                      <p class="i">
                        <svg
                          class="icon"
                          viewBox="0 0 1024 1024"
                          xmlns="http://www.w3.org/2000/svg"
                          width="18"
                          height="18"
                        >
                          <path
                            d="M822.912 116.053333l-116.48 237.226667a21.333333 21.333333 0 0 0 19.2 30.72h117.248a21.333333 21.333333 0 0 1 15.232 36.266667L360.362667 926.72a21.333333 21.333333 0 0 1-36.309334-18.005333l47.445334-329.685334a21.333333 21.333333 0 0 0-18.048-24.149333l-1.536-0.170667L198.272 554.666667a21.333333 21.333333 0 0 1-21.034667-25.002667l74.069334-426.666667A21.333333 21.333333 0 0 1 272.341333 85.333333h531.456a21.333333 21.333333 0 0 1 19.114667 30.72z"
                            v-if="good.article_wxapp_region == '国内精选'"
                            :fill="icon.active"
                          ></path>
                          <path
                            d="M822.912 116.053333l-116.48 237.226667a21.333333 21.333333 0 0 0 19.2 30.72h117.248a21.333333 21.333333 0 0 1 15.232 36.266667L360.362667 926.72a21.333333 21.333333 0 0 1-36.309334-18.005333l47.445334-329.685334a21.333333 21.333333 0 0 0-18.048-24.149333l-1.536-0.170667L198.272 554.666667a21.333333 21.333333 0 0 1-21.034667-25.002667l74.069334-426.666667A21.333333 21.333333 0 0 1 272.341333 85.333333h531.456a21.333333 21.333333 0 0 1 19.114667 30.72z"
                            v-if="good.article_wxapp_region == '跨境精选'"
                            :fill="icon.inactive"
                          ></path>
                          <path
                            d="M822.912 116.053333l-116.48 237.226667a21.333333 21.333333 0 0 0 19.2 30.72h117.248a21.333333 21.333333 0 0 1 15.232 36.266667L360.362667 926.72a21.333333 21.333333 0 0 1-36.309334-18.005333l47.445334-329.685334a21.333333 21.333333 0 0 0-18.048-24.149333l-1.536-0.170667L198.272 554.666667a21.333333 21.333333 0 0 1-21.034667-25.002667l74.069334-426.666667A21.333333 21.333333 0 0 1 272.341333 85.333333h531.456a21.333333 21.333333 0 0 1 19.114667 30.72z"
                            v-if="good.article_wxapp_region == '海淘精选'"
                            :fill="icon.active2"
                          ></path>
                        </svg>
                        <span class="country"
                          >{{ good.article_wxapp_region }}
                          <i>{{ good.article_channel_name }}</i></span
                        >
                      </p>
                    </div>
                    <div class="goods_item">
                      <div class="goods_img">
                        <img
                          :src="
                            'https://images.weserv.nl/?url=' + good.article_pic
                          "
                          style="width: 1.11rem; height: 0.97rem"
                        />
                      </div>

                      <div class="goods_desc">
                        <h2>{{ good.article_title }}</h2>
                        <p class="goods_pri">{{ good.article_price }}</p>
                        <p class="goods_last">
                          <span class="g_1"
                            >{{ good.article_mall }}|{{
                              good.article_format_date
                            }}</span
                          >
                          <span class="g_2"
                            ><i class="iconfont">&#xe667;</i>
                            {{ good.article_comment
                            }}<span class="g_3"
                              >值{{ good.article_worthy }}</span
                            ></span
                          >
                        </p>
                      </div>
                    </div>
                  </div>
                </li>
              </router-link>
            </ul>
          </div>
        </van-list>
      </van-pull-refresh>
    </main>
  </div>
</template>

<script>
import Vue from "vue";
import { Swipe, SwipeItem, Skeleton, Search, List, PullRefresh } from "vant";
import Good from "./good.vue";
import axios from "axios";

Vue.use(List);
Vue.use(Skeleton);
Vue.use(Search);
Vue.use(PullRefresh);
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
  components: {
    Good,
  },
  data() {
    return {
      value: "",
      isLoading: true,
      goodsList: [],
      loading: false,
      finished: false,
      refreshing: false,
    };
  },
  methods: {
    async onSearch(val) {
      let { f, wxapp, order, type, keyword } = this;
      let ret = await axios.get("/v1/list", {
        params: {
          f,
          wxapp,
          order,
          type,
          keyword,
        },
      });
      let source = ret.data.data.rows;
      this.goodsList = [...this.goodsList, ...source];
    },
    onClickLeft() {
      this.$router.back();
    },

    async onLoad() {
      if (this.refreshing) {
        this.goodsList = [];
        this.offset = 0;
        this.refreshing = false;
      } else {
        this.offset += this.limit;
      }
      await this.loadGoods();
      this.loading = false;
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    sear() {
      this.$router.push({
        path: "/search",
      });
    },
  },

  created() {
    this.f = "wxapp";
    this.wxapp = "zdmapp";
    this.offset = 0;
    this.limit = 10;
  },
  async mounted() {
    await this.loadGoods();
    // 显示数据，控制骨架屏
    this.isLoading = false;
  },
};
</script>

<style lang="stylus" scoped>
@import '../../assets/border.styl';
@import '../../assets/ellipsis.styl';

.goods_rec {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  overflow: hidden;
  background-color: #f8f8f8;
}

main {
  flex: 1;
  overflow-y: scroll;
}

.nav {
  position: sticky;
  top: 0;
  height: 0.45rem;
  text-align: center;
  line-height: 0.45rem;
  background-color: white;

  h1 {
    font-size: 0.16rem;
    font-weight: 400;
  }
}
</style>